import CSwitch from "@/components/CSwitch"
import useAppSource from "@/hooks/useAppSource"
import { saveMusicInfo, uploadMusic, urls } from "@/services"
import { getUploadResponse } from "@/util"
import { QuestionCircleOutlined } from "@ant-design/icons"
import { Box } from "@mui/system"
import { useRequest } from "ahooks"
import { AForm, AFormItem, WxUploader } from "aling"
import { Button, Form, FormInstance, message } from "antd"
import { Input, Popover, Switch, TextArea } from "antd-mobile"
import React, { useEffect, useRef } from "react"

export default () => {
  const formRef = useRef<{ instance: FormInstance }>()
  const [SourceBadge] = useAppSource()
  const formcover = Form.useWatch("cover", formRef.current?.instance)
  const formfile = Form.useWatch("file", formRef.current?.instance)
  const { runAsync: runUpload, loading: uploadLoading } = useRequest(
    saveMusicInfo,
    {
      manual: true,
      onSuccess(data, params) {
        message.success("上传成功！")
      },
    },
  )
  return (
    <>
      <Box>
        <AForm
          footerOptions={{
            cancelButton: {
              style: {
                display: "none",
              },
            },
            okButton: {
              children: "上传",
              loading: uploadLoading,
            },
          }}
          ref={formRef}
          onSubmit={({ file, ...value }) => {
            console.log(value)
            runUpload({
              ...value,
              url: getUploadResponse(file)?.[0],
              cover: getUploadResponse(value.cover)?.[0],
              fileSize: file?.[0]?.size || 0,
            })
          }}
          layout="vertical"
        >
          <AFormItem
            name={"file"}
            required
            rules={[{ required: true }]}
            label={"音乐文件"}
          >
            <SourceBadge offset={[20, 63]} hidden={formfile?.length}>
              <WxUploader
                maxCount={1}
                action={"/api" + urls.putObject + "?bucket=musics"}
                beforeUpload={(file: any, fileList: any) => {
                  console.log(file, fileList)
                  formRef.current?.instance.setFieldValue("name", file.name)
                }}
                onChange={(list, info) => {
                  console.log("list:", list, info)
                }}
                //multiple
                accept="audio/*"
              ></WxUploader>
            </SourceBadge>
          </AFormItem>
          <AFormItem
            required
            rules={[{ required: true }]}
            name={"name"}
            label={"歌曲名"}
          >
            <Input></Input>
          </AFormItem>
          <AFormItem name={"cover"} label={"封面"}>
            <SourceBadge hidden={formcover} offset={[20, 63]}>
              <WxUploader
                maxCount={1}
                action={"/api" + urls.putObject + "?bucket=musiccovers"}
                accept="image/*"
              ></WxUploader>
            </SourceBadge>
          </AFormItem>
          <AFormItem name={"singer"} label={"歌手"}>
            <Input></Input>
          </AFormItem>
          <AFormItem name={"lrc"} label={"歌词"}>
            <TextArea
            //   onBlur={() => {
            //     console.log(
            //       formRef.current.instance
            //         ?.getFieldValue("lrc")
            //         .replaceAll("\r\n", ""),
            //     )
            //     formRef.current.instance.setFieldValue(
            //       "lrc",
            //       formRef.current.instance
            //         ?.getFieldValue("lrc")
            //         .replaceAll("\r\n", ""),
            //     )
            //   }}
            ></TextArea>
          </AFormItem>
          <AFormItem
            initialValue={true}
            name={"public"}
            label={
              <Box>
                是否公开
                <Popover
                  trigger="click"
                  content={<Box>开启后其他人可以听您上传的音乐哦！</Box>}
                >
                  <Button
                    size="small"
                    type="link"
                    icon={<QuestionCircleOutlined></QuestionCircleOutlined>}
                  ></Button>
                </Popover>
              </Box>
            }
          >
            <CSwitch></CSwitch>
          </AFormItem>
        </AForm>
      </Box>
    </>
  )
}
